<template>
    <div class="topNav">
        <div class="t_leftBox" v-if="cityStatus">
            <span>{{ city }}</span>
            <img src="../../assets/img/topNav/down.svg">
        </div>
        <div class="t_rightBox">
            <img src="../../assets/img/topNav/search.svg" alt="搜索icon">
            <span>{{ himt }}</span>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            city: '获取中...',
            himt: '电影 / 电视剧 / 影人'
        }
    },
    created () {
        //根据IP获取当前用户所在城市
        this.$axios.get(this.API1).then(res => {
            //处理掉返回字符串中的多余数据，并取出城市字段的值
            let cityJson = JSON.parse(res.data.substring(19, res.data.length - 1)).cname
            //省略省级和区级信息只获取市级
            this.city = cityJson.substring(cityJson.indexOf('省') + 1,cityJson.indexOf('市') + 1)

        }).catch(error => {
            console.log(error)
        })
    },
    props: ['cityStatus']
}    
</script>

<style scoped lang="scss">
.topNav {
    height: 35px;
    padding: 10px 20px;
    display: flex;
    .t_leftBox {
        min-width: 80px;
        display: flex;
        justify-content: center;
        align-items: center; 
        color: #494949;
        font-size: 14px;
        img {
            width: calc(35px / 2);
            height: calc(25px / 2);
            margin-left: 5px;
            margin-right: 10px;
        }
    }
    .t_rightBox {
        flex: 1;
        height: 100%;
        background-color: #f5f5f5;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #9b9b9b;
        font-size: 14px;
        img {
            width: calc(35px / 2);
            height: calc(35px / 2);
            margin-right: 5px;

        }
    }
}
</style>
